import type { {{capitalize componentName}}VariantProps } from "@heroui/theme";

import {HTMLHeroUIProps, mapPropsVariants} from "@heroui/system";
import { {{componentName}} } from "@heroui/theme";
import {ReactRef, useDOMRef} from "@heroui/react-utils";
import {objectToDeps} from "@heroui/shared-utils";
import {useMemo} from "react";

interface Props extends HTMLHeroUIProps<"div"> {
  /**
   * Ref to the DOM node.
   */
  ref?: ReactRef<HTMLElement | null>;
}

export type Use{{capitalize componentName}}Props = Props & {{capitalize componentName}}VariantProps;

export function use{{capitalize componentName}}(originalProps: Use{{capitalize componentName}}Props) {
  const [props, variantProps] = mapPropsVariants(originalProps, {{componentName}}.variantKeys);

  const {ref, as, className, ...otherProps} = props;

  const Component = as || "div";

  const domRef = useDOMRef(ref);

  const styles = useMemo(
  () =>
    {{componentName}}({
      ...variantProps,
      className,
    }),
  [objectToDeps(variantProps), className],
);

  return {Component, styles, domRef, ...otherProps};
}

export type Use{{capitalize componentName}}Return = ReturnType<typeof use{{capitalize componentName}}>;
